<template>
  <div>
    <hry-header title="添加银行卡" :showBackBtn="true">
      <div slot="content" class="withdraw">
        <md-notice-bar mode="closable" icon="volumn" type="activity" scrollable>
          尊敬的用户，信用卡功能因政策原因已停用。
        </md-notice-bar>
        <div class="common-style"></div>
        <div class="form-wrapper">
          <form v-if="!isShowCapital" novalidate @submit.prevent="addCard">
            <md-field>
              <md-input-item
                :value="account"
                placeholder="请输入姓名"
                title="姓名:"
                readonly
              >
              </md-input-item>
              <md-field-item
                style="height: 30pt;padding: 0"
                title="类型:"
                :content="form.cardTypeName"
                @click="showSelector"
                arrow
                solid
              />
              <input-validate
                type="bankCard"
                title="银行卡号："
                v-model="form.bankNumber"
                placeholder="请输入银行卡号"
                v-validate="'required'"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="银行卡号"
                name="bankNumber"
                :error="errors.first('bankNumber')"
              ></input-validate>
              <input-validate
                type="phone"
                title="预留手机号："
                v-model="form.bankMobile"
                placeholder="请输入预留手机号"
                v-validate="'required'"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="预留手机号"
                name="bankMobile"
                :error="errors.first('bankMobile')"
              ></input-validate>
              <!--              <input-validate-->
              <!--                v-if="form.cardType === 2"-->
              <!--                title="卡片有效期："-->
              <!--                type="digit"-->
              <!--                v-model="form.validate"-->
              <!--                placeholder="请输入卡片有效期"-->
              <!--                v-validate="'required'"-->
              <!--                data-vv-value-path="innerValue"-->
              <!--                data-vv-validate-on="input"-->
              <!--                data-vv-as="卡片有效期"-->
              <!--                name="validate"-->
              <!--                :error="errors.first('validate')"-->
              <!--              ></input-validate>-->
              <!--              <input-validate-->
              <!--                v-if="form.cardType === 2"-->
              <!--                title="CVV2："-->
              <!--                type="digit"-->
              <!--                v-model="form.cvv2"-->
              <!--                placeholder="请输入CVV2"-->
              <!--                v-validate="'required'"-->
              <!--                data-vv-value-path="innerValue"-->
              <!--                data-vv-validate-on="input"-->
              <!--                data-vv-as="CVV2"-->
              <!--                name="cvv2"-->
              <!--                :error="errors.first('cvv2')"-->
              <!--              ></input-validate>-->
            </md-field>
            <md-selector
              v-model="isSelectorShow"
              :default-value="data[0].value"
              :data="data"
              max-height="320px"
              title="类型"
              @choose="onSelectorChoose"
            ></md-selector>
            <div style="text-align: center">
              <a-button type="primary" block html-type="submit"
                >确认绑定</a-button
              >
            </div>
          </form>
          <div v-else class="capital">
            <h1 class="text-warning">验证码已发至{{ form.bankMobile }}</h1>
            <md-field>
              <input-validate
                type="digit"
                title="验证码："
                v-model="form.code"
                placeholder="请输入验证码"
                v-validate="'required'"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="验证码"
                name="code"
                :error="errors.first('code')"
              ></input-validate>
              <a-button type="primary" block @click="actCard"
                >确认提交</a-button
              >
            </md-field>
          </div>
        </div>
      </div>
    </hry-header>
  </div>
</template>

<script>
import { InputItem, Field, Selector, FieldItem, NoticeBar } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.money("money", "最低提现金额100元");
export default {
  name: "recharge",
  components: {
    inputValidate,
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      isSelectorShow: false,
      isShowCapital: false,
      data: [
        {
          text: "储蓄卡",
          value: 1
        }
        // {
        //   text: "信用卡",
        //   value: 2
        // }
      ],
      form: {
        bankNumber: null,
        bankMobile: null,
        cardTypeName: "储蓄卡",
        cardType: 1,
        validate: "",
        cvv2: "",
        code: ""
      },
      id: ""
    };
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorChoose({ text, value }) {
      this.form.cardTypeName = text;
      this.form.cardType = value;
    },
    addCard() {
      this.$validator.validate().then(result => {
        if (result) {
          let obj = {};
          if (this.form.cardType === 1) {
            obj = {
              card_type: this.form.cardType,
              bank_number: this.form.bankNumber,
              bank_mobile: this.form.bankMobile
            };
          } else {
            obj = {
              card_type: this.form.cardType,
              bank_number: this.form.bankNumber,
              bank_mobile: this.form.bankMobile,
              validate: this.form.validate,
              cvv2: this.form.cvv2
            };
          }
          this.$ajax
            .post(this.$api.addCard, obj, false, "请稍后...")
            .then(res => {
              this.isShowCapital = true;
              this.id = res.data.id;
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    actCard() {
      this.$validator.validateAll({ code: this.form.code }).then(result => {
        if (result) {
          let obj = {
            id: this.id,
            code: this.form.code
          };
          this.$ajax
            .post(this.$api.actCard, obj, false, "绑定中...")
            .then(() => {
              this.$message.success("添加成功");
              this.$router.go(-1);
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    }
  },
  watch: {
    "form.money": function(value) {
      let money = parseFloat(value);
      this.form.realMoney = (money - 1.5).toFixed(2);
    }
  },
  computed: {
    account() {
      return this.$store.state.account;
    }
  }
};
</script>

<style scoped lang="less">
.form-wrapper {
  padding: 0 62px;
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .capital {
    h1 {
      margin: 60px 0;
      text-align: center;
    }
  }
}
</style>
